<template>
	<div class="Register">
		<!-- 头部导航 -->
		<div class="banner">
			<img src="/static/images/back.svg" alt="返回" @click="back" class="back" />
			<text>注册账号</text>
		</div>

		<!-- 账号注册表单 -->
		<div class="UserInfo">
			<div class="input">
				<text>手机号</text>
				<input type="tel" v-model="phone" placeholder="请填写注册手机号" class="input_info" maxlength="11" />
			</div>

			<div class="input">
				<div class="code-wrapper">
					<div class="code-input">
						<text>验证码</text>
						<input type="number" v-model="code" placeholder="请填写验证码" class="input_info" maxlength="6" />
					</div>
					<button class="get-code-btn" :disabled="isCountingDown" @click="getVerificationCode">
						{{ countdown > 0 ? `${countdown}s` : "获取验证码" }}
					</button>
				</div>
			</div>

			<div class="input">
				<text>设置密码</text>
				<input type="password" v-model="password" placeholder="请填写密码" class="input_info" />
			</div>

			<div class="input">
				<text>确认密码</text>
				<input type="password" v-model="confirmPassword" placeholder="请再次填写密码" class="input_info" />
			</div>
		</div>

		<!-- 用户协议 -->
		<div class="userAgreement">
			<checkbox :value="agreementChecked" :checked="agreementChecked" @click="toggleAgreement" />
			<text style="opacity: 0.5">是否同意</text>
			<text style="color: #8276fb" @click="showAgreement">「用户协议」</text>
			<text style="opacity: 0.5">和</text>
			<text style="color: #8276fb" @click="showPrivacy">「隐私政策」</text>
		</div>

		<button class="registerBtn" @click="register">注册</button>
	</div>
</template>

<script lang="ts" setup>
import { type RegisterResponse } from "@/pages/utils/request";
import { ref, onUnmounted } from "vue";
import { http } from "../../../utils/Http";

const phone = ref("");
const code = ref("");
const password = ref("");
const confirmPassword = ref("");
const agreementChecked = ref(true);
const countdown = ref(0);
const isCountingDown = ref(false);
let timer: number | null = null;

// 返回上一页
const back = () => {
	uni.navigateBack();
};

// 获取验证码
const getVerificationCode = () => {
	if (!phone.value) {
		uni.showToast({
			title: "请输入手机号",
			icon: "none",
		});
		return;
	}

	if (!/^1[3-9]\d{9}$/.test(phone.value)) {
		uni.showToast({
			title: "请输入正确的手机号",
			icon: "none",
		});
		return;
	}

	// 生成6位随机验证码
	const codeValue = Math.floor(100000 + Math.random() * 900000).toString();
	console.log("本次验证码：", codeValue);
	// 开始倒计时
	countdown.value = 60;
	isCountingDown.value = true;
	timer = setInterval(() => {
		countdown.value--;
		if (countdown.value <= 0) {
			clearInterval(timer as number);
			timer = null;
			isCountingDown.value = false;
		}
	}, 1000);

	uni.showToast({
		title: "验证码已生成（请看控制台）",
		icon: "none",
	});
};

// 切换协议勾选状态
const toggleAgreement = () => {
	agreementChecked.value = !agreementChecked.value;
};

// 查看用户协议
const showAgreement = () => {
	uni.navigateTo({
		url: "/pages/Agreement/Agreement",
	});
};

// 查看隐私政策
const showPrivacy = () => {
	uni.navigateTo({
		url: "/pages/Privacy/Privacy",
	});
};

// 注册逻辑
const register = async () => {
	if (!agreementChecked.value) {
		uni.showToast({
			title: "请先同意用户协议和隐私政策",
			icon: "none",
		});
		return;
	}

	if (
		!phone.value ||
		!code.value ||
		!password.value ||
		!confirmPassword.value
	) {
		uni.showToast({
			title: "请填写完整信息",
			icon: "none",
		});
		return;
	}

	if (password.value !== confirmPassword.value) {
		uni.showToast({
			title: "两次输入的密码不一致",
			icon: "none",
		});
		return;
	}

	if (password.value.length < 6 || password.value.length > 20) {
		uni.showToast({
			title: "密码长度应为6-20位",
			icon: "none",
		});
		return;
	}

	try {
		uni.showLoading({ title: "正在注册..." });
		const res = await http.post<RegisterResponse>("/api/Register", {
			phone: phone.value,
			password: password.value,
		});
		uni.hideLoading();
		if (res.code === 200) {
			uni.showToast({ title: "注册成功", icon: "success" });
			setTimeout(() => {
				uni.navigateTo({ url: '/pages/Login/Login' });
			}, 1500);
		} else {
			uni.showToast({ title: res.message || "注册失败", icon: "none" });
		}
	} catch (err: any) {
		uni.hideLoading();
		uni.showToast({ title: err?.message || "注册失败", icon: "none" });
	}
};

// 清除定时器
onUnmounted(() => {
	if (timer) clearInterval(timer);
});
</script>

<style scoped lang="scss">
.Register {
	width: 100%;
	max-width: 500px;
	height: 100vh;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	position: relative;
	overflow-y: auto;
	background-color: #fff;
}

.banner {
	width: 100%;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-top: 40px;
	font-size: 36rpx;
	font-weight: bold;
	color: #333;

	.back {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 20rpx;
		cursor: pointer;
	}
}

.UserInfo {
	width: 100%;
	margin-top: 60rpx;
	display: flex;
	flex-direction: column;
}

.input {
	width: 100%;
	margin-bottom: 40rpx;

	text {
		display: block;
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: #333;
	}

	.input_info {
		width: 100%;
		height: 70rpx;
		border-bottom: 1px solid #eee;
		padding: 0;
		font-size: 28rpx;
		color: #333;

		&::placeholder {
			color: #ccc;
			font-size: 28rpx;
		}
	}

	.code-wrapper {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.code-input {
		width: calc(100% - 190rpx);
	}
}

.get-code-btn {
	width: 180rpx;
	height: 56rpx;
	line-height: 52rpx;
	color: #6f76fb;
	font-size: 24rpx;
	background: none;
	border: 1px solid #6f76fb;
	border-radius: 28rpx;
	padding: 0;
	white-space: nowrap;
	margin-bottom: 4rpx;

	&[disabled] {
		color: #999;
		border-color: #ccc;
	}
}

.userAgreement {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	font-size: 24rpx;
	margin-top: 40rpx;
	color: #999;

	text {
		margin: 0 4rpx;
		cursor: pointer;
	}

	checkbox {
		margin-right: 8rpx;
	}
}

.registerBtn {
	width: 100%;
	height: 90rpx;
	margin-top: 60rpx;
	background-color: #6f76fb;
	color: white;
	border: none;
	border-radius: 45rpx;
	font-size: 32rpx;
	transition: background-color 0.3s;

	&:active {
		background-color: #5a62d8;
	}

	&[disabled] {
		background-color: #ccc;
	}
}
</style>
